<template>
  <!-- Default box -->
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">用户信息</h3>
    </div>

    <div class="card-body">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :rules="rules"
        id="userform"
      >
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/questionbank/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :disabled="isEdit"
            name="file"
          >
            <img v-if="form.photo" :src="imgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" :disabled="isEdit" readonly />
        </el-form-item>
        <!-- <el-form-item label="原密码" v-show="!isEdit" prop="oldpassword">
          <el-input v-model="form.oldpassword" required></el-input>
        </el-form-item>
        <el-form-item label="新密码" v-show="!isEdit" prop="newpassword">
          <el-input v-model="form.newpassword"></el-input>
        </el-form-item> -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" :disabled="isEdit"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" :disabled="isEdit"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="edit" v-if="isEdit">编辑</el-button>
          <el-button type="primary" @click="onSubmit" v-else>提交</el-button>
          <el-button v-show="!isEdit" @click="cancelEdit">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!-- /.card-body -->
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      id: "",
      form: {},
      isEdit: true,
      baseUrl: "",
      imgUrl: "",
      rules: {
        // oldpassword: [
        //   { required: true, message: "原密码不能为空", trigger: "blur" },
        //   { min: 3, max: 8, message: "长度在 8 到 16 个字符", trigger: "blur" },
        // ],
        // newpassword: [
        //   { required: true, message: "新密码不能为空", trigger: "blur" },
        //   { min: 3, max: 8, message: "长度在 8 到 16 个字符", trigger: "blur" },
        // ],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        nickname: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
          { min: 2, max: 16, message: "长度在 2 到 16 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.form.id = this.id;
      this.axiosJSON.post("/user/update", this.form).then((result) => {
        if (result.data.code == 0) {
          this.$message({
            type: "success",
            message: result.data.msg,
          });
          this.$router.push("/home");
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    edit() {
      this.isEdit = false;
    },
    cancelEdit() {
      this.isEdit = true;
      this.form = this.$store.getters.getLoginUser;
    },
    handleAvatarSuccess(res, file) {
      this.form.photo = file.response.data;
      this.imgUrl = "http://localhost:8080" + this.form.photo;
      this.$message({
        type: "success",
        message: "上传成功",
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
  },
  created() {
    this.form = this.$store.getters.getLoginUser;
    this.id = this.$store.getters.getLoginUser.id;
    this.imgUrl = "http://localhost:8080" + this.form.photo
  },
};
</script>

<style>
#userform {
  width: 30%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
